<template>
    <router-link to="/">
       home
    </router-link>
    <!-- 下面router-link用法是路由新增内容，实际代码逻辑也可以用编程式导航实现 -->
    <router-link :to="{path:'/about',query:{name:'xiaohua',age:18}}" v-slot="{href, route, navigate, isActive, isExactActive}">
        <span>{{href}}</span>
        <span :style="{color:isActive?'red':''}">{{route.fullPath}}</span>
        <button :style="{color:isExactActive?'red':''}">about</button>
        <div>
            <!-- isActive和isExactActive判断是否是精准匹配，是为true否就为false -->
            <span>{{isActive}}</span>
            <span>{{isExactActive}}</span>
        </div>
    </router-link>
    <!-- <router-link :to="{path:'/about',query:{name:'xiaohua',age:18}}" v-slot="{href, route, navigate, isActive, isExactActive}" custom>
        <span>{{href}}</span>
        <span :style="{color:isActive?'red':''}">{{route.fullPath}}</span>
        <button @click="navigate" :style="{color:isExactActive?'red':''}">about</button>
    </router-link> -->

    <!-- <button @click="btnClick">about</button> -->
    <!-- <router-view></router-view> -->
    <router-link to="/CatGery">
       catgery
    </router-link>
    <!-- 动画 -->
    <router-view v-slot="{ Component, route }">
        <transition mode="out-in" :name="route.meta.transition||'why'">
            <keep-alive>
               <div :key="route.name">
                 <component :is="Component"></component>
               </div>
            </keep-alive>
        </transition>
    </router-view>
</template>

<script setup>
import {useRouter} from 'vue-router'
const router=useRouter()
//编程式导航
const btnClick=()=>{
    router.push('/about?name=xiaohua&age=18')
   //router.replace('/about?name=xiaohua&age=18') //替换当前路由
    //router.push({path:'/about',query:{name:'xiaohua',age:18}})

    // router.go(1) 前进
    // router.go(-1) 后退
    //router.forward() 前进
    //router.back() 后退
}
</script>

<style scoped>
.why-enter-from,
.why-leave-to {
  opacity: 0;
}
.why-enter-active,
.why-leave-active {
  transition: all 1s ease;
}
</style>